<template>
	<view class="home">
		<view class="imfflx">
			<image class="img" :src="productList.productImage" mode=""></image>
		</view>
		<view class="item">
			<text class="tie">名称：</text>
			<text class="text">{{productList.productName}}</text>
		</view>
		<view class="item">
			<text class="tie">IMEI：</text>
			<text class="text">{{productList.imei}}</text>
		</view>
		<view class="item">
			<view class="itemCLS" hover-class="itemACT" v-if="disabled">
				<text style="color: #474747;font-size: 35rpx;">此设备已绑定到</text>
				<text style="color: #ff5500;font-size: 50rpx;">{{zhandian}}</text>
				<text style="color: #474747;font-size: 35rpx;">站点</text>
			</view>
			<view class="itemCLS" hover-class="itemACT" v-if="!disabled" @click="choiceZDFN">
				<text style="color: #55aa7f;font-size: 40rpx;" >{{zhandian}}</text>
			</view>
			<!-- <u-button :disabled="disabled" type="default" :plain="true" :text="zhandian" @click="choiceZDFN"></u-button> -->
		</view>
		<!-- 弹窗 -->
		<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancel"></u-picker>
		<u-modal :show="modalshow" showCancelButton @confirm="modalconfirm" @cancel="modalcancel">
			<view class="">
				<text style="font-size: 40rpx;">是否绑定到</text>
				<text style="font-size: 50rpx;color: #00aa7f;">{{zhandian}}</text>
				<text style="font-size: 40rpx;">站点</text>
			</view>
		</u-modal>
		<view class="" style="margin-top: 20rpx;">
			<u-button type="primary" shape="circle" text="解绑站点" @click="unBindProject"></u-button>
		</view>
		<view class="" style="margin-top: 20rpx;">
			<u-button type="primary" shape="circle" text="解绑设备" @click="unBindUserDevice"></u-button>
		</view>
		<view class="" style="margin-top: 400rpx;">
			<u-button :disabled="disabled" type="primary" shape="circle" text="绑定站点" @click="but"></u-button>
		</view>
		<!-- 扫码自动弹窗 -->
		<u-modal :show="devModal" showCancelButton :content='devcontent' @confirm="devconfirm" @cancel="devcancel"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				devModal: false,
				devcontent: '是否添加设备',
				modalshow: false,
				zhandian: '选择站点',
				productList: {},
				project: null,
				show: false,
				columns: [],
				disabled: false,
				selectIsUserDeviceIF: true,
				deviceId: null,
				productId: null,
				projectIF:false
				
			}
		},
		onLoad(option) {
			
			this.deviceId = option.id
			this.productListFn(option.id) //设备详情
			this.selectIsUserDeviceFn(option.id) //【判断是否绑定用户
			this.projectFn()  // 站点列表
		},
		methods: {
			// 解绑站点
			unBindProject(id){
				uni.$u.http.get('/device/device/unBindProject/' + this.deviceId).then(res => {
					console.log('解绑站点',res);
					if (res.code == 200) {
						
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 解绑设备
			unBindUserDevice(id){
				uni.$u.http.get('/device/device_user/unBindUserDevice/' + this.deviceId).then(res => {
					console.log('解绑设备',res);
					if (res.code == 200) {
						
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			//扫码确认
			devconfirm(){
				this.devModal = false
				
				this.addPhoneFn()
				console.log('扫码确认');
			},
			//扫码取消
			devcancel(){
				this.devModal = false
				uni.navigateBack({
					delta: 1
				});
				console.log('扫码取消');
			},
			but() {
				if (this.productId == null) {
					uni.showToast({
						title: '站点未选择',
						duration: 1000
					});
					return
				}
				this.modalshow = true
			},
			// 弹窗确定
			modalconfirm() {
				this.bindProjectFn()
				this.modalshow = false
			},
			// 弹窗取消
			modalcancel() {
				this.modalshow = false
			},
			// 选框确定
			confirm(e) {
				this.show = false
				this.productId = e.value[0].id
				this.zhandian = e.value[0].label
				console.log('选框确定', e.value[0].id);
			},
			// 选框取消
			cancel() {
				this.show = false
				console.log('选框取消');
			},
			// 选择站点
			choiceZDFN() {
				this.show = true
			},
			// 绑定站点
			bindProjectFn() {
				uni.$u.http.post('/device/device/BindProject', {
					"id": this.deviceId,
					"projectId": this.productId
				}).then(res => {
					console.log('绑定站点', res);
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							duration: 500
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},600)
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 绑定用户
			addPhoneFn() {
				console.log('绑定用户', this.deviceId);
				uni.$u.http.post('/device/device_user/addPhone', {
					"deviceId": this.deviceId
				}).then(res => {
					console.log('绑定用户', res);
					if (res.code == 200) {

					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 是否绑定站点
			isDeviceProjectFn(id) {
				console.log('id', id);
				uni.$u.http.get('/device/device/isDeviceProject/' + id).then(res => {
					if (res.code == 200) {
						console.log('是否绑定站点', res);
						if (res.data.data) {
							this.disabled = false
						} else {
							this.zhandian = res.data.project.projectName
							this.disabled = true
						}
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 是否绑定用户
			selectIsUserDeviceFn(id) {
				uni.$u.http.get('/device/device_user/selectIsUserDevice/' + id).then(res => {
					if (res.code == 200) {
						this.selectIsUserDeviceIF = res.data
						console.log('是否绑定用户', res);
						if (res.data) {
							this.devModal = true //是否添加设备
							this.isDeviceProjectFn(this.deviceId)
						} else {
							this.isDeviceProjectFn(this.deviceId)
						}
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 设备详情
			productListFn(id) {
				uni.$u.http.get('/device/device/getInfoPhone/' + id).then(res => {
					if (res.code == 200) {
						this.productList = res.data

					} else {
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 站点列表
			projectFn() {
				uni.$u.http.get('/device/project/list').then(res => {
					if (res.code == 200) {
						console.log('res', res);
						let arr = []
						for (let i = 0; i < res.rows.length; i++) {
							let obj = {}
							obj.label = res.rows[i].projectName
							obj.id = res.rows[i].id
							arr.push(obj)
						}
						this.columns.push(arr)
					} else {
						uni.reLaunch({
							url: '/pages/home/login'
						});
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
		}
	}
</script>
<style scoped lang="scss">
	.home {
		margin: 0 auto;
		width: 650rpx;

		.imfflx {
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 260rpx;
				height: 260rpx;
				// background-color: #1d1d1d;
				padding: 20rpx;

			}
		}


		.item {
			background-color: #f3f3f3;
			margin: 10rpx;
			padding: 20rpx;
			border-radius: 20rpx;

			.tie {
				font-size: 40rpx;
				color: #4f4f4f;
			}

			.text {
				font-size: 50rpx;
				color: #1d1d1d;
			}
		}
	}

	.itemCLS {
		background-color: #f7f7f7;
		text-align: center;
		padding: 10rpx;
		border-radius: 20rpx;
	}

	.itemACT {
		border-radius: 20rpx;
		border-radius: 20rpx;
		background-color: #cecece;
	}
</style>
<style>
	page {
		background-color: #ffffff;
	}
</style>